<template>
  <div class="content">
    <div class="workbench">
      <div class="worktop border_style bg_style">
        <div class="workinput">
          <div style="margin-right:8px">
            <YsInput clearable type="text" class="search-input" v-model="page_param.keyword"
              @keydown.enter.native="handleTableList" placeholder="请输入关键字">
            </YsInput>
          </div>
          <div>
            <YsButton type="primary" class="searchBtn" @click="handleTableList()">查询</YsButton>
          </div>
        </div>
        <div class="open-btn">
          <YsButton class="right-between" @click="openModal(null, true)">新增</YsButton>
        </div>
      </div>
      <div class="table-box border_style bg_style">
        <proTable ref="proTableDom" class="border01" :loading="page.tableLoad" :columns="page.columns" :data="page.data"
          @clickPage="onClickPage" :current="page_param.start_recd" :total="page.allTotal"
          :pageSize="page_param.limit_recd"></proTable>
      </div>
    </div>
    <!-- 检测工艺新增编辑 -->
    <craft-modal ref="craftRef" :data="craftInfo" :add-and-exit="addAndExit" @handleRefresh="handleTableList">
    </craft-modal>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import craftModal from './components/craftModal.vue'
export default {
  name: "projectMaintenance",
  computed: {
    ...mapGetters(["getCommData"]),
  },
  components: {
    craftModal,
  },
  data() {
    return {
      addAndExit: true,
      craftInfo: {
        pd_code: "",
        pd_name: "",
        pd_customer: "",
        remark: "",
      },
      page_param: {
        ent_no: "",//企业编号
        keyword: "",
        start_recd: 1,//开始数据
        limit_recd: 10,//查询的条数
      },
      page: {
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            title: "序号",
            width: 80,
            tooltip: true,
            render: (h, params) => {
              return h(
                "span",
                params.index +
                (this.page_param.start_recd - 1) *
                this.page_param.limit_recd +
                1
              );
            },
          },
          {
            title: "检测工艺名称",
            minWidth: 100,
            key: "pd_name",
            tooltip: true
          },
          {
            title: "检测工艺编号",
            key: "pd_code",
            minWidth: 100,
            tooltip: true
          },
          {
            title: "适用范围中的结构",
            key: "pd_customer",
            minWidth: 100,
            tooltip: true
          },
          {
            title: "适用范围中的材料类别",
            key: "pd_customer",
            minWidth: 100,
            tooltip: true
          },
          {
            title: "适用范围中的厚度",
            key: "pd_customer",
            minWidth: 100,
            tooltip: true
          },
          {
            title: "备注",
            key: "remark",
            minWidth: 100,
            tooltip: true
          },
          {
            title: "操作",
            width: 150,
            render: (h, params) => {
              let _this = this;

              return h("div", [
                h("span", {
                  domProps: {
                    innerText: "编辑",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.openModal(params.row, false);
                      event.stopPropagation();
                    },
                  },
                }),
                h("span", {
                  domProps: {
                    innerText: "删除",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.handleDlelteItem(params.row);
                      event.stopPropagation();
                    },
                  },
                }),
              ]);
            },
          },
        ],
        data: [],
      },
    };
  },

  methods: {
    ...mapActions(['getPageQueryProjectAPI', 'delSpringProjecAPI']),
    //获取服务列表
    handleTableList() {
      let _this = this
      this.page.tableLoad = true
      _this.getPageQueryProjectAPI(this.page_param).then(res => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false
        if (status === 'ok') {
          this.page.data = data.craftInfos
          this.page.allTotal = data.all_recd
        } else {
          _this.$YsMessage.error(msg)
        }
      }).catch(err => {
        _this.page.tableLoad = false
        _this.$YsMessage.error('获取数据失败')
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page_param.start_recd = pageNum
      this.handleTableList()
    },
    //创建和编辑检验工艺
    openModal(item, flag) {
      this.addAndExit = flag
      if (!this.addAndExit) {
        this.craftInfo = {
          pd_code: item.pd_code,
          pd_name: item.pd_name,
          pd_customer: item.pd_customer,
          remark: item.remark,
          id: item.id,
        }
      }
      this.$refs.craftRef.open()
    },
    //删除检验工艺
    handleDlelteItem(item) {
      let _this = this;
      this.$YsModal.confirm({
        title: "删除检验工艺信息",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          _this.delSpringProjecAPI({ craftInfo: { id: item.id } }).then((res) => {
            let {  msg, status } = res
            if (status === "ok") {
              _this.$YsMessage.success("删除成功")
              _this.handleTableList()
            } else {
              _this.$YsMessage.error(msg)
            }
          }).catch((err) => {
            _this.$YsMessage.error("删除失败")
          })
        },
      })
    }
  },
  mounted() {
    let { ent_no } = this.getCommData
    this.page_param.ent_no = ent_no
    this.handleTableList()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  .workbench {
    width: 100%;
    height: calc(100% - 20px);
    padding-bottom: 0;

    .worktop {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 72px;
      border: 1px solid #cfd7e5;
      border-radius: 4px;
      margin-bottom: 8px;

      .workinput {
        display: flex;
      }

      .open-btn {
        margin-left: auto;
      }
    }
  }

  .table-box {
    width: 100%;
    height: calc(100% - 80px);
    border: 1px solid #cfd7e5;
    border-radius: 4px;
  }

}

/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  margin-right: 8px;

  &:hover {
    opacity: 0.8;
  }
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
</style>